<template>
  <div>
    <el-card class="order-list-breadcrumb">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>钱包</el-breadcrumb-item>
        <el-breadcrumb-item>账单详情</el-breadcrumb-item>
      </el-breadcrumb>
    </el-card>
    <el-card class="order-list-filter">
      <div class="list-filter-wrap">
        <h3 class="list-filter-date">日期: {{ data.date }}</h3>
        <el-dropdown
          class="list-filter-select"
          split-button
          type="primary"
          @command="handelFilter"
        >
          {{ filterStatus.label }}
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item
              v-for="item in OrderTypeOptions"
              :command="item.value"
              :key="item.value"
              >{{ item.label }}</el-dropdown-item
            >
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </el-card>
    <el-card class="order-list-show">
      <el-table
        :data="
          data.list
            .slice(
              (pagination.currentPage - 1) * pagination.pageSize,
              pagination.currentPage * pagination.pageSize
            )
            .filter(
              ({ order_type }) =>
                filterStatus.value === -1 || order_type === filterStatus.value
            )
        "
        style="width: 100%"
        v-loading="listLoading"
      >
        <el-table-column prop="order_type" label="类型" width="180">
          <template slot-scope="scope">
            <i :class="[ORDER_TYPE_ICON[scope.row.order_type], 'icon']"></i>
            {{ ORDER_TYPE_TEXT[scope.row.order_type] }}
          </template>
        </el-table-column>
        <el-table-column prop="price" label="金额" width="180" />
        <el-table-column prop="time" label="记录时间" />
        <el-table-column prop="remark" label="备注" />
      </el-table>
      <el-pagination
        :page-size="pagination.pageSize"
        :current-page="pagination.currentPage"
        :total="pagination.total"
        @size-change="sizeChange"
        @current-change="currentChange"
        layout="total, sizes, prev, pager, next, jumper"
      />
    </el-card>
  </div>
</template>
<script>
import moment from "moment";
import { OrderTypeOptions, ORDER_TYPE_TEXT, ORDER_TYPE_ICON } from "./enums";
export default {
  data() {
    return {
      data: { date: "", list: [] },
      filterStatus: { label: "筛选框", value: -1 },
      listLoading: false,
      pagination: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
      },
      OrderTypeOptions,
      ORDER_TYPE_TEXT,
      ORDER_TYPE_ICON,
    };
  },
  methods: {
    async fetchData() {
      try {
        this.listLoading = true;
        const response = await this.$http.get(
          "http://webcast.bytedance.com/api/bill/detail"
        );
        this.listLoading = false;

        if (!response)
          return this.$message({
            message: "数据获取失败",
            type: "error",
          });

        const { data: { date, list } = {} } = response;
        this.data = { date: moment(+date).format("YYYY-MM-DD"), list };
        this.pagination = { ...this.pagination, total: list.length };
      } catch {
        this.$message({
          message: "数据获取异常",
          type: "error",
        });
        this.data = {
          date: null,
          list: [],
        };
      }
    },
    handelFilter(value) {
      this.filterStatus = {
        label: ORDER_TYPE_TEXT[value],
        value,
      };
    },
    sizeChange(pageSize) {
      this.pagination = { ...this.pagination, pageSize };
    },
    currentChange(currentPage) {
      this.pagination = { ...this.pagination, currentPage };
    },
  },
  mounted() {
    this.fetchData();
  },
};
</script>
<style lang="scss" scoped>
.order-list-filter {
  margin: 20px;
  .list-filter-wrap {
    display: flex;
    .list-filter-select {
      flex: 1;
      display: flex;
      padding-top: 10px;
      justify-content: flex-end;
    }
  }
}
.order-list-show {
  margin: 20px;
  .icon {
    display: inline-block;
    padding: 10px;
    margin-right: 10px;
    font-size: 20px;
    border-radius: 20px;
    background-color: #3a8ee6;
    color: #fff;
  }
}
</style>